<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <title>夏日猜涨跌</title>
    <link rel="stylesheet" type="text/css" href="./css/reset.css">
    <link rel="stylesheet" type="text/css" href="./css/index.css">
    <script type="text/javascript">
        function resRem(){//设置rem
            var deviceWidth = document.documentElement.clientWidth;
            document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
        }
        resRem();
    </script>
</head>
<body>
    <div class="page_container">
        <!-- 头部 -->
        <header>
            <!-- 头部 背景 -->
            <img src="./images/bg.png" alt="">
            <!-- 分享 + 签到 -->
            <div class="link">
                <a href="javascript:void(0)" id="share"><img src="./images/分享btn.png" alt="" /></a>
                <a href="javascript:void(0)" id="sign"><img src="./images/签到btn.png" alt="" /></a>
            </div>
        </header>
        <!-- 主体 -->
        <main>
            <!-- 看涨跌 -->
            <div class="guess">
                <!-- 战绩 筹码 -->
                <div id="my_gains" class="gains">
                    我的战绩：<span id="user_gains">0</span>个筹码  <i><img src="./images/我的战绩.png" alt="" /></i>
                </div>
                <div class="container">
                    <!-- 猜涨跌 -->
                    <div class="gs_guess pr">
                        <!-- tab栏 -->
                        <div id="first_tab" class="tab clearfix">
                            <a href="javascript:void(0);" id="tab_ing" class="current">进行中</a>
                            <a href="javascript:void(0);" id="tab_end">
                                <span class="img"><img src="./images/上涨.png" alt=""></span>
                                <i class="end_data">7月16日</i>已结束
                            </a>
                        </div>
                        <!-- 进行中 -->
                        <div class="ing">
                            <div class="question"><span class="ing_data">7月17日</span>沪指是涨是跌？</div>
                            <!-- 涨 / 跌 -->
                            <div class="UorD clearfix">
                                <div class="left fl">
                                    <div class="img">
                                        <img src="./images/金币-涨.png" alt="">
                                    </div>
                                    <p class="data"><span class="ing_Urate">50</span>%的人猜涨</p>
                                    <a class="ing_isBet" id="guess_U" href="javascript:void(0);">
                                        <img src="./images/我看涨@3x.png" alt="">
                                    </a>
                                    <a class="ing_noBet" id="ing_UD" href="javascript:void(0);">
                                        <img src="./images/我看涨.png" alt="">
                                    </a>
                                </div>
                                <div class="right fr">
                                    <div class="img">
                                        <img src="./images/金币-跌.png" alt="">
                                    </div>
                                    <p class="data"><span class="ing_Drate">50</span>%的人猜跌</p>
                                    <a class="ing_isBet" id="guess_D" href="javascript:void(0);">
                                        <img src="./images/我看跌@3x.png" alt="">
                                    </a>
                                    <div class="my_guess ing_noBet one-txt-cut">
                                        <div>
                                            投注数量：<span id="ing_scoreNum">1</span>个筹码
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 截止时间 -->
                            <p class="end_time"><span class="ing_data">7月17日</span>12:59截止</p>
                        </div>
                        <!-- 已结束 -->
                        <div class="end">
                            <!-- 已投注 -->
                            <div class="have_result">
                                <div class="clearfix">
                                    <div class="left"><img id="have_result_img" src="./images/金币-涨.png" alt=""></div>
                                    <div class="right fl">
                                        <div><span class="end_data">7月16日</span>沪指<i id="have_result_i">涨</i>了</div>
                                        <div><span id="have_result_rate">65%</span>的人猜对</div>
                                        <div>本期赔率<span id="end_odds">1:5</span></div>
                                    </div>
                                </div>
                                <div class="description clearfix">
                                    <div class="img fl"><img id="have_result_dimg" src="./images/zan.png" alt=""></div>
                                    <div id="have_result_description" class="fl">
                                        <div>股神，恭喜你赢得了<span id="have_result_jetton">5</span>个筹码</div>
                                        <div>你看<i id="have_result_UD">涨</i>，投注数量：<span><i id="have_result_scoreNum">10</i>个筹码</span></div>
                                    </div>
                                </div>
                                <div class="end_time"><span class="end_data">7月17日</span>12:59截止</div>
                            </div>
                            <!-- 未投注没结果 -->
                            <div class="no_result">
                                <div class="question"><span class="end_data">7月17日</span>沪指是涨是跌？</div>
                                <!-- 涨 / 跌 -->
                                <div class="UorD clearfix">
                                    <div class="left fl">
                                        <div class="img">
                                            <img id="no_result_img" src="./images/金币-涨.png" alt="">
                                        </div>
                                        <p class="data"><span class="end_Urate">37</span>%的人猜涨</p>
                                        <a class="end_noBet" id="no_result_UD" href="javascript:void(0);">
                                            <img src="./images/我看涨.png" alt="">
                                        </a>
                                    </div>
                                    <div class="right fr">
                                        <div class="img">
                                            <img src="./images/金币-跌.png" alt="">
                                        </div>
                                        <p class="data"><span class="end_Drate">37</span>%的人猜跌</p>
                                        <div class="my_guess end_noBet">投注数量：<span id="no_result_scoreNum">1</span>个筹码</div>
                                    </div>
                                </div>
                                <!-- 我猜的 -->
                                <!-- 截止时间 -->
                                <p class="end_time"><span class="end_data">7月17日</span>15:30公布结果</p>
                            </div>
                        </div>
                    </div>
                    <!-- 其他人的猜测情况 -->
                    <div class="others">
                        <div class="container">
                            <ul id="guess_others_ul">
                                <!-- 看涨样式 -->
                                <li class="bearish clearfix">
                                    <div class="others_time">13:34:23</div>
                                    <div class="others_judge"><i class="img"><img src="./images/上涨.png" alt=""></i> 看涨</div>
                                    <div class="tel">169****0022</div>
                                    <div class="get"><div>10个筹码</div></div>
                                </li>
                                <!-- 看跌样式 -->
                                <li class="bullish clearfix">
                                    <div class="others_time">13:34:23</div>
                                    <div class="others_judge"><i class="img"><img src="./images/下跌.png" alt=""></i> 看跌</div>
                                    <div class="tel">169****0022</div>
                                    <div class="get">10个筹码</div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 奖品兑换 -->
            <div class="convert pr">
                <div class="title"><img src="./images/奖品兑换.png" alt=""></div>

                <div id="convert_detailed" class="description">
                    活动期间，完成两融征信赠送500个筹码，开通两融账号再送1000个筹码，<i>详细&gt;</i>
                </div>


                <ul class="list" id="convert_list">
                    <!-- 能兑换pass -->
                    <li class="fail">
                        <div class="left fl pr">
                            <div class="img card"><img src="./images/流量.png" alt=""></div>
                        </div>
                        <div class="right fr">
                            <a href="javascript:void(0)">兑换</a>
                        </div>
                        <div class="center">
                            <p class="p one-txt-cut one-txt-cut"><i>30M流量</i></p>
                            <p><span>100个筹码</span>可兑换</p>
                        </div>
                    </li>
                     <!--不能兑换积分不足fail -->
                    <li class="fail">
                        <div class="left fl pr">
                            <div class="img card"><img src="./images/月卡.png" alt=""></div>
                        </div>
                        <div class="right fr">
                            <a href="javascript:void(0)">兑换</a>
                        </div>
                        <div class="center">
                            <p class="p one-txt-cut"><i>"融夺标"月卡(限两融老客户)</i></p>
                            <p><span>200个筹码</span>可兑换</p>
                        </div>
                    </li>
                    <!--1是已兑换-->
                     <li class="fail">
                        <div class="left fl pr">
                            <div class="img rate"><img src="./images/优惠利率.png" alt=""></div>
                        </div>
                        <div class="right fr">
                            <a href="javascript:void(0)">已兑换</a>
                        </div>
                        <div class="center">
                            <p class="p one-txt-cut"><i>融资优惠利率7.99%</i></p>
                            <p><span>500个筹码</span>可兑换</p>
                        </div>
                    </li>
                    <li class="fail">
                        <div class="left fl pr">
                            <div class="img card"><img src="./images/优酷-月卡.png" alt=""></div>
                        </div>
                        <div class="right fr">
                            <a href="javascript:void(0)">兑换</a>
                        </div>
                        <div class="center">
                            <p class="p one-txt-cut"><i>优酷会员-月卡</i></p>
                            <p><span>700个筹码</span>可兑换</p>
                        </div>
                    </li>
                    <li class="fail">
                        <div class="left fl pr">
                            <div class="img card"><img src="./images/年卡.png" alt=""></div>
                        </div>
                        <div class="right fr">
                            <a href="javascript:void(0)">兑换</a>
                        </div>
                        <div class="center">
                            <p class="p one-txt-cut"><i>优酷会员-年卡</i></p>
                            <p><span>1300个筹码</span>可兑换</p>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 筹码明细 -->
            <div id="details" class="details">
                <h2>筹码明细</h2>
                <ul id="details_ul">
                    <!-- 兑换样式 -->
                    <!-- <li class="exchange pr">
                        <ol class="clearfix">
                            <li>7/11</li>
                            <li><img src="./images/present.png" alt=""></li>
                            <li>兑换</li>
                            <li>融资优惠利率A</li>
                            <li>-100个筹码</li>
                        </ol>
                    </li> -->
                    <!-- 签到样式 -->
                    <!-- <li class="sign pr">
                        <ol class="clearfix">
                            <li>7/11</li>
                            <li><img src="./images/qiandao.png" alt=""></li>
                            <li>签到</li>
                            <li></li>
                            <li>-10个筹码</li>
                        </ol>
                    </li> -->
                    <!-- 看跌样式 -->
                    <!-- <li class="down pr">
                        <ol class="clearfix">
                            <li>7/10</li>
                            <li><img src="./images/down.png" alt=""></li>
                            <li>看跌</li>
                            <li>融资优惠利率A</li>
                            <li>-100个筹码</li>
                        </ol>
                    </li> -->
                    <!-- 看涨样式 -->
                    <!-- <li class="up pr">
                        <ol class="clearfix">
                            <li>7/9</li>
                            <li><img src="./images/up.png" alt=""></li>
                            <li>看涨</li>
                            <li>融资优惠利率A</li>
                            <li>-100个筹码</li>
                        </ol>
                    </li> -->
                    <!-- 赠送样式 -->
                    <!-- <li class="give pr">
                        <ol class="clearfix">
                            <li>7/11</li>
                            <li><img src="./images/present.png" alt=""></li>
                            <li>赠送</li>
                            <li>融资优惠利率A</li>
                            <li>-100个筹码</li>
                        </ol>
                    </li> -->
                    <!-- 赠送样式 -->
                    <!-- <li class="give pr">
                        <ol class="clearfix">
                            <li>7/11</li>
                            <li><img src="./images/yitou.png" alt=""></li>
                            <li>收益</li>
                            <li>融资优惠利率A</li>
                            <li>-100个筹码</li>
                        </ol>
                    </li> -->
                </ul>
                <div id="completeLink" class="link">
                    <a href="javascript:void(0);" id="complete">查看完整筹码明细</a>
                </div>
            </div>
        </main>
        <!-- 底部 -->
        <footer>
            <!-- 活动规则 -->
            <div class="rule">
                <h2>活动规则</h2>
                <h4>A. 游戏时间</h4>
                <p> T-1日13:00-T日12:59（非交易日都为游戏时间），兴证通客户可以竞猜T日上证指数涨跌方向（指数持平视为涨）。</p>
                <h4>B.  游戏筹码</h4>
                <p> 用户在竞猜时间，投入游戏筹码，即可参与竞猜，单次游戏投入筹码数量为10个及其整数倍，赔率按T日收盘胜负双方的积分比率计算。</p>
                <h4>C.  游戏筹码获取途径</h4>
                <p> a）完成两融征信，赠送500个筹码；开通两融账号，再赠送1000个筹码；</p>
                <p>b）每天到活动页点击签到，即可获得10个筹码奖励，当天到账；</p>
                <p>c）参与本活动，如猜对方向，会根据投注数量获得相应比例的筹码奖励。</p>
                <h4>D.  游戏奖励</h4>
                <p> 每日结算后，根据用户投入筹码数量和指数涨跌情况向所有猜对用户发放筹码奖励。用户可在“我的战绩”中查看游戏筹码奖励到账和每期盈亏情况，实际奖励（四舍五入取整）将在每个交易日结果公布后一个工作日内到账。</p>
                <h4>E.  奖励兑换</h4>
                <div class="table clearfix">
                    <div class="left fl">
                        <div class="thead">虚拟物奖励</div>
                        <div class="tbody">
                            100个筹码 <br>
                            200个筹码 <br>
                            500个筹码 <br>
                            700个筹码 <br>
                            1300个筹码
                        </div>
                    </div>
                    <div class="right fl">
                        <div class="thead">等值实物奖励</div>
                        <div class="tbody">
                            30M流量 <br>
                            "融夺标"月卡<br>
                            融资优惠利率7.99% <br>
                            优酷会员月卡 <br>
                            优酷会员年卡
                        </div>
                    </div>
                </div>
                <p class="tx_in0">1次签到=10个筹码，所有兑换仅限至少参与过3次投注的用户；<br />
                各档产品均可兑换，每档产品限兑换一次；<br />
                "融夺标"月卡的兑换仅针对活动前已开通两融账号的客户，活动结束前兑换有效；<br />
                实物奖励将在活动结束后14个工作日内派发到兴证通对应的手机号；<br />
                 融资优惠利率兑换每日限量50个，需在活动结束前兑换有效，兑换后需在9月29日前成功开通两融账号，过期失效。</p>
                <h4>F.  参与次数</h4>
                <p>单个游戏时间内每个用户仅可参与游戏1次，同一手机号、兴证通账号视为同一用户。</p>
                <h4>G.  免责声明</h4>
                <p>a）同一手机号、兴证通号均视为同一用户,若存在任何作弊行为的用户,兴业证券将取消其参与资格,已经发放奖品的有权收回奖品；</p>
                <p>b）用户需确保兴证通账号内有足额的游戏筹码，若账号内筹码少于当期参与数量，则奖励不会派发；</p>
                <p>c）请确保网络和系统通畅,若因网络原因或系统原因,造成游戏中断、奖励未到账的情况，兴业证券将不再补发奖励；</p>
                <p>d）用户参与活动，即视为同意以上活动规则和免责声明；</p>
                <p>e）本次活动最终解释权归兴业证券股份有限公司所有，如有疑问，请拨打客服热线：95562。</p>
            </div>
        </footer>
        <!-- 浮层 -->
        <div class="supernatant">
            <!-- 签到浮层 -->
            <div class="sign_supernatant shade_supernatant">
                <div class="container container_supernatant">
                    <div class="img"><img src="./images/弹窗bg4.png" alt=""></div>
                    <div>10个</div>
                    <a id="supernatant_sign" href="javascript:void(0);">签到</a>
                    <a id="get_more" href="javascript:void(0);">获得更多筹码 &gt;</a>
                    <div class="close_supernatant"><img src="./images/关闭.png" alt=""></div>
                    <div class="title">每天签到领筹码哦</div>
                </div>
            </div>
            <!-- Toast结果显示 -->
            <div id="sign_result" class="result"><span>尚未参与两融征信,赶快去参与吧!</span></div>
            <!-- 投注浮层 -->
            <div class="cathectic_supernatant shade_supernatant">
                <div class="container container_supernatant">
                    <form action="javascript:void(0);" method="get" accept-charset="utf-8">
                        <div class="top">
                            <input id="cathectic_input" type="number" placeholder="请输入投注数" autofocus="autofocus" name="">
                            <div>您有<span id="cathectic_max">30</span>个筹码，投注数需为10的整数倍</div>
                        </div>
                        <button id="cathectic_ensure">确定</button>
                    </form>
                    <div class="close_supernatant"><img src="./images/关闭.png" alt=""></div>
                </div>
            </div>
            <!-- 无筹码浮层 -->
            <div class="noChip_supernatant shade_supernatant">
                <div class="container container_supernatant">
                    <div class="top"></div>
                    <p>您还没有筹码,不能投注,<br />
                    每天签到可以领取哦</p>
                    <button id="to_sign">去签到</button>
                    <div class="close_supernatant"><img src="./images/关闭.png" alt=""></div>
                </div>
            </div>
            <!-- 获得更多筹码浮层 -->
            <div class="more_supernatant shade_supernatant">
                <div class="container container_supernatant">
                    <form action="#" id="more_supernatant" method="get" accept-charset="utf-8">
                        <div class="top">
                            <div class="title">开通两融账户，赠筹码</div>
                            <div class="description">
                                拥有融资融券账户，就像获得一张股市信用卡，可以向我司借入资金买证券，或借入证券进行卖出，风口来时，祝你胜券在握！
                            </div>
                        </div>
                        <div class="bottom">
                            <div class="description">
                                第一步：优理宝APP自助征信，快速申请融资融券交易额度。
                            </div>
                            <div class="get clearfix">
                                <div class="left fl"><i><img src="./images/money.png" alt=""></i>赠500个筹码</div>
                                <a id="join_two" class="can" href="javascript:void(0);">参加两融征信</a>
                            </div>
                            <div class="description">
                                第二步：完成两融征信后，请到线下营业部办理开通两融账号。
                            </div>
                            <div class="get clearfix bb_none">
                                <div class="left fl"><i><img src="./images/money.png" alt=""></i>赠1000个筹码</div>
                                <a id="dredge_two" class="can" href="javascript:void(0);">开通两融帐号</a>
                            </div>
                        </div>
                    </form>
                    <div class="close_supernatant"><img src="./images/关闭.png" alt=""></div>
                </div>
            </div>
            <!-- 两融账户绑定浮层 -->
            <div class="activate_supernatant shade_supernatant">
                <div class="container container_supernatant">
                    <form action="#" method="get" accept-charset="utf-8">
                        <div class="top">
                            <div class="title">该奖品需要登记您的普通资金帐号</div>
                            <div class="input">
                                <div>
                                    <span>普通资金帐号</span>
                                    <input type="number" id="account_number1" class="more_userPhone" placeholder="请输入普通资金帐号" />
                                </div>
                                <div>
                                    <span>交易密码</span>
                                    <input class="general" id="account_number2" placeholder="请输入交易密码" type="password" />
                                </div>
                            </div>
                        </div>
                        <a href="javascript:void(0)" class="submit" id="activate_submit">确定</a>
                    </form>
                    <div class="close_supernatant"><img src="./images/关闭.png" alt=""></div>
                </div>
            </div>
            <!-- 非兴证通浮层 -->
            <div class="no_new_supernatant shade_supernatant">
                <div class="container container_supernatant">
                    <div class="top" id="no_new_content">抱歉,请用兴证通帐号登录</div>
                    <div class="bottom">
                        <a id="to_no_land" href="javascript:void(0);">确定</a>
                        <a id="close_no_new" href="javascript:void(0);">取消</a>
                    </div>
                </div>
            </div>
            <!-- 兑换成功浮层 -->
            <div class="success_supernatant shade_supernatant">
                <div class="container container_supernatant">
                    <div class="top">兑换成功</div>
                    <div class="description">活动结束后14个工作日内礼品<br />自动派发，后续请关注手机信息</div>
                    <a href="javascript:void(0);">知道了</a>
                    <div class="close_supernatant"><img src="./images/关闭.png" alt=""></div>
                </div>
            </div>
            <!-- 兑换失败浮层 -->
            <div class="fail_supernatant shade_supernatant">
                <div class="container container_supernatant">
                    <div class="top" id="fail_content">您已是两融账户用户，不支持兑换<br />融资优惠利率，可兑换其它奖品</div>
                    <div class="bottom">
                        <a id="ensure_btn" href="javascript:void(0);">确定</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<!-- 其他人的猜测情况模版 -->
<script type="text/html" id="guess_others">
    {{if guessList}}{{each guessList as value}}
    <li class="{{value.tag == 1 ? 'bearish' : 'bullish'}} clearfix">
        <div class="others_time">{{getOthersTime(value.updateTime)}}</div>
        <div class="others_judge"><i class="img"><img src="{{value.tag == 1 ? './images/上涨.png' : './images/下跌.png'}}" alt=""></i> {{value.tag == 1 ? '看涨' : '看跌'}}</div>
        <div class="tel">{{value.phone}}</div>
        <div class="get"><div>{{value.scoreNum}}个筹码</div></div>
    </li>
    {{/each}}{{/if}}
</script>
<!-- 奖品兑换模版 -->
<script type='text/html' id='template'>
    {{each prizeList as value i}}
        <li class="{{exchange(value.isSupply)}}">
            <div class="left fl pr">
                <div class="img {{i === 2 ? 'rate' : 'card'}}"><img src="{{value.pic}}" alt=""></div>
            </div>
            <div class="right fr">
                <a href="javascript:void(0)" data-index='{{value.isActivate}}' data-isSupply='{{value.isSupply}}' data-id='{{value.id}}' data-price='{{value.price}}'>{{isExchanged(value.isSupply)}}</a>
            </div>
            <div class="center">
                <p class="p one-txt-cut one-txt-cut"><i>{{value.name}}</i></p>
                <p><span>{{value.price}}个筹码</span>可兑换</p>
            </div>
        </li>
    {{/each}}
</script>
<script src="./js/jquery-2.2.2.min.js"></script>
<script src="./js/template.js"></script>
<script src="./js/rsa.js"></script>
<script src="./js/td-h5-website-sdk-3.1.2.js"></script>
<script src="./js/index.js"></script>
</html>